<template>

    <div class="loginContainer">
        <h1 class="loginTitle">用户权限管理系统</h1>
        <a-form
                :model="loginData"
                name="basic"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                autocomplete="off"
        >
            <a-form-item label="账号">
                <a-input v-model:value="loginData.userCode"/>
            </a-form-item>

            <a-form-item label="密码">
                <a-input-password v-model:value="loginData.password"/>
            </a-form-item>

            <a-form-item label="验证码">
                <a-space>
                    <a-input v-model:value="loginData.code" style="width: 150px;"/>
                    <img :src="codeData" style="width: 80px;height: 40px" @click="getCode"/>
                </a-space>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" @click="login">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import router from '../router/index'
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue'
    import store from '@/store'

    export default {
        name: "Login",
        setup() {
            const loginData = ref({
                userCode: 'admin1',
                password: '123'
            })
            const codeData = ref()

            const login = () => {
                console.log("登录信息", loginData.value)
                axios.post('/user/login', loginData.value).then(rs => {
                    console.log("登录结果", rs)
                    if (rs.data.code == 200) {
                        message.success("登陆成功")
                        store.commit('setUser',rs.data.data)
                        router.push('/home')
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const getCode = () => {
                axios.get('/user/getCode').then(rs => {
                    console.log("验证码", rs)
                    codeData.value = rs.data.data;
                })
            }

            onMounted(() => {
                getCode();
            })

            return {
                login,
                loginData,
                getCode,
                codeData

            }
        }
    }
</script>

<style scoped>
    .loginContainer {
        border-radius: 15px;
        /*margin: auto;*/
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 450px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 0px auto 20px auto;
        text-align: center;
    }
</style>